<template>
    <el-row>
        <el-col :span="24" class="publish-container">
            <div class="search-conatainer" :style="`height:${120}px`">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
                    :size="'default'" status-icon>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item>
                                <div class="button-container">
                                    <div class="data-search-tit">成果发布</div>
                                    <div>
                                        <el-button style="width: 60px" @click="resetForm()" :size="'small'">重置</el-button>
                                        <el-button style="width: 60px" type="primary" @click="submitForm(ruleFormRef)"
                                            :size="'small'">
                                            查询
                                        </el-button>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30">
                        <el-col :span="5">
                            <el-form-item label="日期选择">
                                <el-date-picker v-model="ruleForm.date" type="daterange" unlink-panels range-separator="To"
                                    start-placeholder="开始日期" end-placeholder="结束日期" style="cursor: pointer"
                                    :shortcuts="shortcuts" /> </el-form-item></el-col>
                        <el-col :span="5">
                            <el-form-item label="发布状态">
                                <el-select v-model="ruleForm.publish" placeholder="请选择发布状态" style="width: 100%">
                                    <el-option v-for="item in publishOptions" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="产品类型">
                                <el-select v-model="ruleForm.type" placeholder="请选择产品类型" style="width: 100%" clearable>
                                    <el-option-group v-for="group in options" :key="group.groupCode"
                                        :label="group.groupAlias">
                                        <el-option v-for="item in group.tasks" :key="item.code" :label="item.taskname"
                                            :value="item.code" />
                                    </el-option-group>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <div class="result-conatainer" :style="`height:${view.height - 190}px`">
                <el-table :data="tableData" style="width: 100%" :height="`${view.height - 272}`" :border="true">
                    <el-table-column fixed prop="id" label="序号" :align="'center '" width="80" />
                    <el-table-column prop="fileDate" label="文件日期" width="120" :align="'center'" />
                    <el-table-column prop="fileName" label="文件名" :align="'center'" />
                    <el-table-column prop="taskCode" label="任务类型" width="100" :align="'center'">
                    </el-table-column>
                    <el-table-column prop="publish" label="是否发布" width="100" :align="'center'">
                        <template #default="scope">
                            <el-link :type="scope.row.publish == 1 ? 'success' : 'warning'">
                                {{ scope.row.publish == 1 ? "已发布" : "未发布" }}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="publish" label="处理状态" width="100" :align="'center'">
                        <template #default="scope">
                            <el-link v-if="scope.row.status == 1" type="success">
                                处理完成
                            </el-link>
                            <el-link v-if="scope.row.status == 2" type="warning">
                                正在处理
                            </el-link>
                            <el-link v-if="scope.row.status == 3" type="error">
                                参数错误
                            </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="300" :align="'center'" />
                    <el-table-column prop="sldPath" label="样式文件" :align="'center'" />
                    <el-table-column label="成果编辑" :align="'center'" width="200">
                        <template #default="scope">
                            <el-button type="primary" link size="small" @click="setCurrentTask(scope.row)">
                                日志
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="成果编辑" :align="'center'" width="200">
                        <template #default="scope">
                            <el-button type="warning" v-if="scope.row.status == 1 && scope.row.publish == 0" size="small"
                                @click="editProduct(scope.row)">
                                编辑
                            </el-button>
                            <el-button type="warning" v-if="scope.row.status != 1 || scope.row.publish != 0"
                                :disabled="true" size="small" @click="editProduct(scope.row)">
                                编辑
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" :align="'center'" width="200">
                        <template #default="scope">
                            <el-button v-if="scope.row.publish == 0" type="primary" size="small"
                                @click="publishProduct(scope.row)">
                                发布
                            </el-button>
                            <el-tag v-if="scope.row.publish == 1" type="success" size="small">
                                已发布
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col :span="24" style="padding-top: 15px">
                        <pagination-com :pagination="resultPagination" @handleSizeChange="resultPageSizeChange"
                            @handleCurrentChange="resultPageIndexChange"></pagination-com>
                    </el-col>
                </el-row>
            </div>
        </el-col>
    </el-row>
    <el-dialog :modelValue="log.dialogStatus" @close="logCloseHandler" width="800px">
        <el-descriptions  direction="vertical" class="margin-top" :title="currentTask.fileName + '.' + currentTask.fileExt" :column="3" :size="''"
            :border="true">
            <template #extra>
                <!-- <el-button type="primary" link>操作</el-button> -->
            </template>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        图像分割开始时间
                    </div>
                </template>
                {{ currentTask.cutStart && currentTask.cutStart != '0' ? Utils.formatTime(Number(currentTask.cutStart)) :
                    '-'
                }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        图像分割结束时间
                    </div>
                </template>
                {{ currentTask.cutEnd && currentTask.cutEnd != '0' ? Utils.formatTime(Number(currentTask.cutEnd)) : '-' }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        图像分割时长
                    </div>
                </template>
                {{ currentTask.cutStart && currentTask.cutStart != '0' && currentTask.cutEnd && currentTask.cutEnd !=
                    '0'
                    ? Utils.convertMsToTime(Number(currentTask.cutEnd)
                        - Number(currentTask.cutStart)) : '-' }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        图像导出开始时间
                    </div>
                </template>
                {{ currentTask.exportStart && currentTask.exportStart != '0' ?
                    Utils.formatTime(Number(currentTask.exportStart)) : '-' }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">

                        图像导出结束时间
                    </div>
                </template>
                {{ currentTask.exportEnd && currentTask.exportEnd != '0' ? Utils.formatTime(Number(currentTask.exportEnd)) :
                    '-' }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        图像导出时长
                    </div>
                </template>
                {{ currentTask.exportStart && currentTask.exportStart !=
                    '0' && currentTask.exportStart && currentTask.exportStart !=
                    '0' ?
                    Utils.convertMsToTime(Number(currentTask.exportEnd) -
                        Number(currentTask.exportStart)) : '-' }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        成果发布开始时间
                    </div>
                </template>
                {{ currentTask.publishStart && currentTask.publishStart != '0' ?
                    Utils.formatTime(Number(currentTask.publishStart)) : '-' }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">

                        成果发布结束时间
                    </div>
                </template>
                {{ currentTask.publishEnd && currentTask.publishEnd != '0' ?
                    Utils.formatTime(Number(currentTask.publishEnd)) :
                    "-" }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        成果发布时长
                    </div>
                </template>
                {{ currentTask.publishStart && currentTask.publishStart != '0' &&
                    currentTask.publishEnd && currentTask.publishEnd != '0' ?
                    Utils.convertMsToTime(Number(currentTask.publishEnd)
                        -
                        Number(currentTask.publishStart)) : '-' }}
            </el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, watch } from "vue";
import * as _ from "lodash";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import HttpService from "@/api/api.js";
import paginationCom from "@/components/pagination/paginationComNormal.vue";
import Utils from "@/utils/util";
const props = {
    expandTrigger: "hover" as const,
};
let log = reactive({
    dialogStatus: false,
});
const logOpenHandler = function () {
    log.dialogStatus = true;
};
const logCloseHandler = function () {
    log.dialogStatus = false;
};

let currentTask = reactive({
    id: 350,
    fileName: "S2A8",
    taskCode: 501,
    taskType: 500,
    fileDate: "19700101",
    fileExt: "tif",
    satType: null,
    publish: 1,
    status: 1,
    log: null,
    filePath: "D:/watchFile/02_Project_dir/501/S2A8_501/S2A8_501_seg_cls.tif",
    createTime: "2023-08-21T08:55:56.000+0000",
    tid: "a281e8ff35554f13affb113403424812",
    sldPath: "D:/uploadFile/501.sld",
    cutStart: "1692608156748",
    cutEnd: "1692608161786",
    exportStart: "1692608192752",
    exportEnd: "1692608195187",
    publishStart: "1692608192591",
    publishEnd: null,
});
const setCurrentTask = function (taskFile) {
    currentTask.fileName = taskFile.fileName;
    currentTask.cutStart = taskFile.cutStart;
    currentTask.cutEnd = taskFile.cutEnd;
    currentTask.exportStart = taskFile.exportStart;
    currentTask.exportEnd = taskFile.exportEnd;
    currentTask.publishStart = taskFile.publishStart;
    currentTask.publishEnd = taskFile.publishEnd;
    logOpenHandler()
}

interface taskFile {
    id: number;
    fileName: string;
    taskCode: number;
    taskType: number;
    fileDate: string;
    fileExt: string;
    satType?: string | null;
    publish: number;
    status: number;
    log?: string | null;
    filePath: string;
    createTime: string;
    tid: string;
    sldPath: string;
}
var date = new Date();
const ruleFormRef = ref<FormInstance>();
let ruleForm = reactive({
    date: [
        new Date(2004, 1, 1, 0, 0, 0),
        new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1, 24, 0),
    ],
    publish: "",
    type: "",
});
const typeChangeHandler = function (type) { };
const rules = reactive<FormRules>({
    name: [
        { required: true, message: "Please input Activity name", trigger: "blur" },
        { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
    ],
});
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            getTaskList();
        } else {
            console.log("error submit!", fields);
        }
    });
};

const publishOptions = [
    {
        value: "",
        label: "全部",
    },
    {
        value: "0",
        label: "未发布",
    },
    {
        value: "1",
        label: "已发布",
    },
];
let options = reactive([]);

const getTasksList = function () {
    HttpService.result.getTasksList(
        {},
        (res) => {
            if (res.status == 200) {
                options.length = 0;
                res.data.data.taskGroup.forEach((item) => {
                    options.push(item);
                });
                console.log(options);
            }
        },
        (error) => {
            console.log(error);
        }
    );
};
getTasksList();
let tableLoading = ref();
const resetForm = () => {
    ruleForm.date = [
        new Date(2004, 1, 1, 0, 0, 0),
        new Date(date.getFullYear(), date.getMonth(), date.getDate(), 24, 0),
    ];
    ruleForm.publish = "";
    ruleForm.type = "";
};
var view = reactive({
    height: window.innerHeight - 61,
});
const shortcuts = [
    {
        text: "前一周",
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
        },
    },
    {
        text: "前一月",
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
        },
    },
    {
        text: "三个月前",
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return [start, end];
        },
    },
];
var tableData: Array<taskFile> = reactive<taskFile[]>([]);
interface Pagination {
    page_index: number;
    page_size: number;
    page_total: number;
}

let resultPagination: Pagination = reactive({
    page_index: 1,
    page_size: 10,
    page_total: 0,
});
const resultPageSizeChange = function (page_size) {
    resultPagination.page_size = page_size;
    getTaskList();
};
const resultPageIndexChange = function (page_index) {
    resultPagination.page_index = page_index;
    getTaskList();
};
const getTaskList = function () {
    let params: any = {
        keyWord: "",
        pageNo: resultPagination.page_index,
        pageSize: resultPagination.page_size,
        end: ruleForm.date[1],
        publish: ruleForm.publish,
        start: ruleForm.date[0],
        type: ruleForm.type,
    };
    tableLoading.value = true;
    tableData.length = 1;
    HttpService.fileTask.getTaskList(
        params,
        (res: any) => {
            if (res.status == 200 && res.data.data) {
                resultPagination.page_total = res.data.data.total;
                res.data.data.tbL1BFileTaskVO.map((item: any) => {
                    tableData.push(item);
                    console.log(item);
                });
            }
            tableLoading.value = false;
        },
        (error: any) => {
            console.log(error);
            tableLoading.value = false;
        }
    );
};
const publishProduct = function (product: taskFile) {
    let params: any = {
        tid: product.tid,
    };
    HttpService.fileTask.publishProduct(
        params,
        (res: any) => {
            if (res.status == 200 && res.data) {
                ElMessage({
                    message: "成果发布成功",
                    type: "success",
                });
            } else {
                ElMessage({
                    message: res.data.message,
                    type: "error",
                });
            }
            getTaskList();
        },
        (error: any) => {
            console.log(error);
        }
    );
};
const editProduct = function (product: taskFile) {
    let params: any = {
        tid: product.tid,
    };
    HttpService.fileTask.editProduct(
        params,
        (res: any) => {
            if (res.status == 200 && res.data) {
                ElMessage({
                    message: "编辑成功",
                    type: "success",
                });
            } else {
                ElMessage({
                    message: res.data.message,
                    type: "error",
                });
            }
            getTaskList();
        },
        (error: any) => {
            console.log(error);
        }
    );
};
getTaskList();
window.onresize = _.debounce(() => {
    view.height = window.innerHeight - 61;
}, 100);
</script>

<style lang="scss" scoped>
.publish-container {
    height: 100%;
    display: flex;

    .search-conatainer {
        background: #fff;
        padding: 20px;
        width: 100%;
        margin-bottom: 10px;
        border-radius: 10px 10px 0 0;
        box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.01),
            0px 8px 20px rgba(0, 0, 0, 0.01);

        .button-container {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .data-search-tit {
                font-size: 18px;
                font-weight: 600;
                font-family: "Courier New", Courier, monospace;
            }
        }
    }
}
</style>
<style lang="scss">
.result-conatainer {
    background: #fff;
    box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
        0px 8px 20px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    border-radius: 0 0 10px 10px;
}
</style>
